<template>
  <div class="PictureModule">
    <el-card
      class="box-card Picture-card"
      shadow="never"
      v-for="(item, index) in pictureData"
      :key="index"
    >
      <template #header>
        <div class="card-header flex items-center justify-between">
          <div>{{ item.label_type }}</div>
          <div class="header-handle" v-if="handleType != 'view'">
            <el-button link type="primary" @click="handleEmpty(item.image_type, index)"
              >清空</el-button
            >
            <el-button
              @click="handleOpen(item.type === 4 ? videoRef : nativeRef, item.type)"
              >本地上传</el-button
            >
            <el-button v-if="item.image_type != 4" @click="handleBatchUpdateType(item)"
              >批量维护类型</el-button
            >
          </div>
        </div>
      </template>
      <PictureList type="showcase" v-model="item.values" :imageType="item.type">
      </PictureList>
    </el-card>
    <NativeUpload
      ref="nativeRef"
      @uploadFile="uploadFile"
      :customTag="props.customTag"
    ></NativeUpload>
    <VideoUpload
      ref="videoRef"
      @uploadFile="uploadFile"
      :customTag="props.customTag"
    ></VideoUpload>
    <batchUpdateImagetype
      ref="batchUpdateImagetypeRef"
      :options="options['gallery.GoodsSkuGalleryContents']?.[0].imageForText"
      @edit="handleBatchUpdateImagetype"
    ></batchUpdateImagetype>
  </div>
</template>

<script setup name="Module">
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive } from "vue";
import PictureList from "./List.vue";
import NativeUpload from "./NativeUpload.vue";
import VideoUpload from "./VideoUpload.vue";
import batchUpdateImagetype from "@/components/Dialog/batchUpdateImagetype/index.vue";

let options = reactive(inject("options"));
let handleType = reactive(inject("handleType"));
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => [],
  },
  customTag: {
    type: String,
    default: () => "",
  },
});

const pictureData = computed({
  get: () => {
    options.value["assignment.ImagesAssignment"]?.[0].imageTypeText &&
      options.value["assignment.ImagesAssignment"]?.[0].imageTypeText.forEach(
        (element, e) => {
          props.modelValue &&
            props.modelValue.forEach((item, i) => {
              if (item.image_type == element.value) {
                item.label = element.label;
              }
            });
        }
      );
    return props.modelValue;
  },
  set: (val) => {
    emit("update:modelValue", val);
  },
});
const nativeRef = ref(null);

const videoRef = ref(null);
// 打开弹窗
const handleOpen = (ref, imageType) => {
  nextTick(() => {
    ref.open(imageType);
  });
};

const uploadFile = (fileList, imageType) => {
  pictureData.value.forEach((item) => {
    if (item.type === imageType) {
      item.values = item.values.concat(fileList);
    }
  });
};

const handleEmpty = (type, index) => {
  ElMessageBox.confirm("是否清空当前类型的图片?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    if (handleType.value == "edit") {
      pictureData.value[index].values.forEach((i) => {
        i.delete = 1;
      });
    } else {
      pictureData.value[index].values = [];
    }
  });
};

// 批量维护类型
const batchUpdateImagetypeRef = ref();
const handleBatchUpdateType = (item) => {
  console.log(item);
  if (item.values.length == 0) {
    ElMessage.error("暂无可维护类型的图片,请先上传图片");
    return;
  }
  batchUpdateImagetypeRef.value.open(item);
};
</script>

<style lang="scss" scoped>
.Picture-card {
  margin: 8px;
  border-color: var(--base-border-color);
  :deep(.el-card__header) {
    // border-bottom: 1px solid var(--base-border-color);
    padding: 12px 9px;
  }
}
</style>
